<template>
  <a-modal
      :title="title"
      :width="600"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 85%;overflow-y: hidden">
    <a-table
        :columns="columns"
        :dataSource="dataList"
        :pagination="false"
        rowKey="id"
    >
      <div slot="modeIndex" slot-scope="{text}">
        {{ text == 0 ? '菜单' : '按钮' }}
      </div>
      <div slot="pidIndex" slot-scope="{text}">
        {{ menu.name }}
      </div>
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
            title="确定删除吗?"
            @confirm="() => menuDelete(record)"
        >
          <a href="javascript:0;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import {underlings, del} from '@/services/menu'

export default {
  name: "Buttons",
  data() {
    return {
      title: '相关按钮',
      columns: [
        {
          title: '按钮名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '菜单类型',
          dataIndex: 'mode',
          align: 'center',
          scopedSlots: {customRender: 'modeIndex'}
        },
        {
          title: '父级菜单',
          dataIndex: 'pid',
          align: 'center',
          scopedSlots: {customRender: 'pidIndex'}
        },
        {
          title: '权限编码',
          dataIndex: 'authority',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: {customRender: 'operation'},
        },
      ],
      dataList: [],
      visible: false,
      menu: {},
      confirmLoading: false,
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('close');
      this.visible = false;
      this.checkedKeys = []
    },
    handleOk() {
      this.submit();
    },
    submit() {
      this.visible = false;
    },
    loadData(id) {
      underlings(id).then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.dataList = data
        } else {
          this.$message.warning(msg);
        }
      })
    },
    handleCancel() {
      this.close()
    },
    initDict() {

    },
    menuDelete(record) {
      del(record.id).then(res => {
        if (res.data.code === 200) {
          this.$message.success('删除成功!' || res.data.msg);
          this.loadData(this.menu.id);
        } else {
          this.$message.error('删除失败!' || res.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
